<template>
  <span
    class="xt-fullscreen inline-block cursor-pointer hover:opacity-50"
    :class="`w-[${size}px] h-[${size}px]`"
    v-fullscreen
  >
    <i class="iconfont" :class="`text-[${size}px]`"></i>
  </span>
</template>

<script lang="ts">
import fullscreen from "@/secondary/directives/fullscreen";
export default {
  name: "xt-fullscreen",
  directives: {
    fullscreen,
  },
};
</script>

<script setup lang="ts">
import { toRefs } from "vue";
interface PropType {
  size?: number;
  iconFull?: string;
  iconNotFull?: string;
  elementId?: string;
}

const props = withDefaults(defineProps<PropType>(), {
  size: 20,
  iconFull: "icon-tuichuquanping",
  iconNotFull: "icon-quanping",
  elementId: "",
});

// props 转 ref
const { size, iconFull, iconNotFull, elementId } = toRefs(props);

const options = {
  iconFull,
  iconNotFull,
  elementId,
};

console.log(options);
</script>
